<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<jsp:include page="common.jsp"></jsp:include>

<c:set value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort }${pageContext.request.contextPath}"
	   var="basePath" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
     <title>layUI 学习页面</title>
   
   </head>
   <body>
     <form class="layui-form" action="">
	   <div class="layui-form-item">
	    <label class="layui-form-label">输入框</label>
	    <div class="layui-input-block">
	      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">密码框</label>
	    <div class="layui-input-inline">
	      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
	    </div>
	    <div class="layui-form-mid layui-word-aux">辅助文字</div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">选择框</label>
	    <div class="layui-input-block">
	      <select name="city" lay-verify="required">
	        <option value=""></option>
	        <option value="0">北京</option>
	        <option value="1">上海</option>
	        <option value="2">广州</option>
	        <option value="3">深圳</option>
	        <option value="4">杭州</option>
	      </select>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">复选框</label>
	    <div class="layui-input-block">
	      <input type="checkbox" name="like[write]" title="写作">
	      <input type="checkbox" name="like[read]" title="阅读" checked>
	      <input type="checkbox" name="like[dai]" title="发呆">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">开关</label>
	    <div class="layui-input-block">
	      <input type="checkbox" name="switch" lay-skin="switch">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">单选框</label>
	    <div class="layui-input-block">
	      <input type="radio" name="sex" value="男" title="男">
	      <input type="radio" name="sex" value="女" title="女" checked>
	    </div>
	  </div>
	  <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">文本域</label>
	    <div class="layui-input-block">
	      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	  <div class="layui-form-item">
		  <div class="layui-input-block">
		    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> 
		  </div>
	  </div>
	  
	  <div class="layui-form-item">
		  <div class="layui-input-block">
			<input type="checkbox" name="xxx" lay-skin="switch">
			<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
			<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
			<input type="checkbox" name="aaa" lay-skin="switch" disabled>
		  </div>
      </div> 
      
	      原始风格：
		<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
		<input type="checkbox" name="" title="发呆" lay-skin="primary"> 
		<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled> 
	
	
	  默认风格：
		<input type="checkbox" name="" title="写作" checked>
		<input type="checkbox" name="" title="发呆"> 
		<input type="checkbox" name="" title="禁用" disabled> 
		
		
	  <div class="layui-form-item">
	    <label class="layui-form-label">标签区域</label>
	    <div class="layui-input-block">
	             原始表单元素区域
	    </div>
      </div>
      
      <div class="layui-form-item">
 
		  <div class="layui-inline">
		    <label class="layui-form-label">范围</label>
		    <div class="layui-input-inline" style="width: 100px;">
		      <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
		    </div>
		    <div class="layui-form-mid">-</div>
		    <div class="layui-input-inline" style="width: 100px;">
		      <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-inline">
		    <label class="layui-form-label">密码</label>
		    <div class="layui-input-block" style="width: 100px;">
		      <input type="password" name="" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
      </div>
      
  </form>
  
  
  
  

 




</body>

 
<script>

layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
	  console.info(data);
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>